<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - Vlog剪辑工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico">
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <header class="header">
            <h1 class="app-title">我的</h1>
            <div class="header-actions">

            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 用户信息区域 -->
            <section class="user-section">
                <div class="user-card" id="user-card">
                    <!-- 未登录状态 -->
                    <div class="login-prompt" id="login-prompt">
                        <div class="avatar-placeholder">
                            <i class="fas fa-user"></i>
                        </div>
                        <h3>欢迎使用视频剪辑工具</h3>
                        <p>登录后可保存您的剪辑作品</p>
                        <button class="btn btn-primary" id="show-login">
                            <span>立即登录</span>
                        </button>
                    </div>
                    
                    <!-- 已登录状态 -->
                    <div class="user-info" id="user-info" style="display: none;">
                        <div class="avatar">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="user-details">
                            <h3 id="user-name">用户名</h3>
                            <p class="user-status">已登录</p>
                        </div>
                        <button class="btn btn-outline" id="logout-btn">
                            <span>退出登录</span>
                        </button>
                    </div>
                </div>
            </section>

            <!-- 功能菜单区域 -->
            <section class="menu-section">
                <div class="menu-item" id="edit-records-menu">
                    <div class="menu-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="menu-content">
                        <h3>剪辑记录</h3>
                        <p>查看我的作品历史</p>
                    </div>
                    <div class="menu-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <div class="menu-item" id="settings-menu">
                    <div class="menu-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="menu-content">
                        <h3>设置</h3>
                        <p>个性化设置</p>
                    </div>
                    <div class="menu-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <div class="menu-item" id="help-menu">
                    <div class="menu-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="menu-content">
                        <h3>帮助与反馈</h3>
                        <p>使用帮助和意见反馈</p>
                    </div>
                    <div class="menu-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </section>

            <!-- 剪辑记录区域 -->
            <section class="records-section" id="records-section" style="display: none;">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fas fa-history"></i>
                        <span>我的作品</span>
                    </h2>
                    <button class="btn-back" id="back-to-menu">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                </div>
                <div class="records-list" id="records-list">
                    <div class="empty-state" id="empty-records">
                        <i class="fas fa-video"></i>
                        <p>还没有剪辑作品</p>
                        <p>去主页开始创作吧！</p>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="/" class="nav-item">
                <i class="fas fa-home"></i>
                <span>主页</span>
            </a>
            <a href="/profile" class="nav-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <span class="close" id="close-login">&times;</span>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-tips">
                        <p>测试账号：admin / password123</p>
                        <p>测试账号：user1 / 123456</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancel-login">
                    <span>取消</span>
                </button>
                <button type="button" class="btn btn-primary" id="confirm-login">
                    <span>登录</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 语言切换提示已删除 -->

    <script src="{{ url_for('static', filename='js/userManager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/profile.js') }}"></script>
</body>
</html>